/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
  AlertIOS,
} from 'react-native';
var shareData = require('./Test.json');
var Dimensions = require('Dimensions');
var screenWidth = Dimensions.get('window').width;
var screenHeight = Dimensions.get('window').height;
//设置列数
var cols = 3;
var cellWH = 100;
var vMargin = (screenWidth - (cols * cellWH)) / (cols + 1);
var hMargin = 25;

var  BListViewDemo = React.createClass({
    //设置初始值（不可变化）
    getDefaultProps()
    {
      return{

      }

    },
    //设置初始值（可变化）
    getInitialState()
    {
      var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2})
      return{
        dataSource: ds.cloneWithRows(shareData.data)
      }
    },
    render(){
      return(
          <ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderRow}
              contentContainerStyle={styles.listViewStyle}
          />
      )
    },
    renderRow(rowData){
      return(
          <TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert('你好')}} >
            <View style={styles.innerViewStyle}>
             <Image source={{uri:rowData.icon}} style={styles.imageStyle}/>
              <Text>{rowData.title}</Text>
            </View>
          </TouchableOpacity>
      )
    }
});
const styles = StyleSheet.create({
    listViewStyle:{
      //主轴方向为横向
      flexDirection:'row',
        //自动换行
        flexWrap:'wrap'
    },
    imageStyle:{
      width:80,
      height:80,
    },
    innerViewStyle:{
      width:cellWH,
      height:cellWH,
      marginLeft: vMargin,
      marginTop: hMargin,
        //居中
        alignItems:'center',
    }
});

AppRegistry.registerComponent('BListViewDemo', () => BListViewDemo);
